<template>
  <div class="rbac-container">
    <el-container>
      <el-header class="search-header">
        <div class="header-top">
          <div class="button-group">
            <el-button type="primary" @click="handleAdd">新增</el-button>
            <el-button @click="handleExport">导出</el-button>
          </div>
          <div class="search-group">
            <el-input 
              v-model="formInline.ProcessName" 
              placeholder="搜索" 
              :suffix-icon="Search"
              @keyup.enter="onSubmit"
              clearable 
              class="search-input"
            />
          </div>
        </div>
      </el-header>
      <el-main class="data-main">
        <el-table :data="tableData" class="data-table" :border="true" :stripe="true">
          <el-table-column type="index" label="序号" width="80px" align="center"/>
          <el-table-column prop="processCode" label="工艺流程编号" width="150px" align="center"/>
          <el-table-column prop="processName" label="工艺流程名称" min-width="200px"/>
          <el-table-column prop="operationCount" label="工序数量" width="100px" align="center"/>
          <el-table-column prop="responsibleName" label="负责人" width="100px" align="center"/>
          <el-table-column prop="departmentName" label="所属部门" width="120px" align="center"/>
          <el-table-column prop="processStatus" label="状态" width="100px" align="center">
            <template #default="scope">
              <el-tag :type="scope.row.processStatus === 1 ? 'success' : 'info'">
                {{ scope.row.processStatus === 1 ? '启用' : '禁用' }}
              </el-tag>
            </template>
          </el-table-column>
          <el-table-column prop="processRemark" label="备注" width="120px"/>
          <el-table-column label="操作" width="180px" align="center" fixed="right">
            <template #default="scope">
              <el-button link type="primary" @click="handleEdit(scope.row)">编辑</el-button>
              <el-button link type="danger" @click="handleDelete(scope.row)">删除</el-button>
              <el-button link type="info" @click="handleView(scope.row)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        
        <el-pagination
          class="pagination"
          v-model:current-page="formInline.PageIndex"
          v-model:page-size="formInline.PageSize"
          :page-sizes="[5, 10, 20]"
          :background="true"
          layout="total, sizes, prev, pager, next, jumper"
          prev-text="上一页"
          next-text="下一页"
          :total="pagin.totalCount"
        />
      </el-main>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { getProcessFlow, deleteProcessFlow } from '@/Https/server';
import { onMounted, ref, reactive, watch } from 'vue';
import { ElMessage, ElMessageBox } from 'element-plus'
import { Search } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'

const router = useRouter();

onMounted(() => {
  GetProcessFlow();
})

//查询条件
const formInline = reactive({
  ProcessName: '',
  PageIndex: 1,
  PageSize:10
  
})

// 分页数据
const pagin = ref({
    totalCount: 0,
    pageCount: 0,
})

//侦听器
watch(formInline, () => {
  GetProcessFlow();
}, { deep: true })

//查询方法
const onSubmit = () => {
  GetProcessFlow();
}

//加载工艺流程数据
const tableData = ref<any>([]);
const GetProcessFlow = () => {
    getProcessFlow(formInline).then((res:any)=>{
        console.log('API返回的数据:', res.pageData || res.PageData);
        tableData.value = res.pageData || res.PageData || [];
        pagin.value.pageCount = res.pageCount || res.PageCount || 0;
        pagin.value.totalCount = res.totalCount || res.TotalCount || 0;
        console.log('分页数据设置:', {
          totalCount: pagin.value.totalCount,
          pageCount: pagin.value.pageCount,
          currentPage: formInline.PageIndex,
          pageSize: formInline.PageSize,
          dataLength: tableData.value.length
        });
    }).catch((error) => {
        console.error('获取工艺流程失败:', error);
        ElMessage.error('获取工艺流程失败');
    });
}

// 编辑工艺流程
const handleEdit = (row: any) => {
  router.push(`/EditProcessFlow/${row.id}`);
}

// 删除工艺流程
const handleDelete = (row: any) => {
  ElMessageBox.confirm(
    `确认删除工艺流程"${row.processName}"吗？`,
    '删除确认',
    {
      confirmButtonText: '确认',
      cancelButtonText: '取消',
      type: 'warning',
    }
  ).then(() => {
    // 调用删除API
    deleteProcessFlow({ id: row.id }).then((res: any) => {
      ElMessage.success('删除成功');
      // 刷新数据
      GetProcessFlow();
    }).catch((error: any) => {
      console.error('删除失败:', error);
      ElMessage.error('删除失败，请稍后重试');
    });
  }).catch(() => {
    ElMessage.info('已取消删除');
  });
}

// 查看工艺流程详情
const handleView = (row: any) => {
  router.push(`/ViewProcessFlow/${row.id}`);
}

// 新增工艺流程
const handleAdd = () => {
  router.push('/AddProcessFlow');
}

// 导出工艺流程
const handleExport = () => {
  ElMessage.info('导出功能待开发');
  console.log('导出工艺流程');
}

</script>

<style>
.rbac-container {
  padding: 15px;
  background-color: #f5f7fa;
  min-height: 100%;
}

.search-header {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 15px;
  margin-bottom: 15px;
}

.header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.button-group {
  display: flex;
  gap: 10px;
}

.search-group {
  display: flex;
  align-items: center;
  max-width: 250px;
}

.search-input {
  width: 100%;
}

.data-main {
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
  padding: 15px;
  min-height: 500px;
}

.data-table {
  margin-bottom: 15px;
}

.pagination {
  margin-top: 20px;
  display: flex;
  justify-content: center;
}

/* 维持Element Plus输入框和选择框的宽度 */
.demo-form-inline .el-input {
  --el-input-width: 220px;
}

.demo-form-inline .el-select {
  --el-select-width: 220px;
}
</style>